<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市订单管理系统</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <link type="text/css" rel="stylesheet" href="css/public.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <!--头部-->
    <header class="publicHeader">
        <h1>超市订单管理系统</h1>
        <div class="publicHeaderR">
            <p><span>下午好！</span><span style="color: #fff21b"> 系统管理员</span> , 欢迎你！</p>
            <a href="jsp/logout.do">退出</a>
        </div>
    </header>
    <!--时间-->
    <section class="publicTime">
        <span id="time">2015年1月1日 11:11  星期一</span>
        <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>
    <!--主体内容-->
    <section class="publicMian ">
        <div class="left">
            <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
            <nav>
                <ul class="list">
                    <li><a href="jsp/bill.do?method=query">订单管理</a></li>
                    <li><a href="jsp/provider.do?method=query">供应商管理</a></li>
                    <li><a href="user.html">用户管理</a></li>
                    <li><a href="jsp/pwdmodify.jsp">密码修改</a></li>
                    <li><a href="jsp/logout.do">退出系统</a></li>
                </ul>
            </nav>
        </div>
        <div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>用户管理页面 >> 用户修改页面</span>
            </div>
            <div class="providerAdd">
                <div>
                    <label for="userName">用户名称：</label>
                    <input type="text" id="userName" v-model="user.userName" @blur="checkUnique">
                    <font color="red">{{errorName}}</font>
                </div>
                <div>
                    <label>用户性别：</label>
                    <input type="radio" v-model="user.gender" value="1" name="gender"/>女
                    <input type="radio" v-model="user.gender" value="2" name="gender"/>男
                </div>
                <div>
                    <label for="birthday">出生日期：</label>
                    <input type="date" id="birthday" v-model="user.birthday"/>
                    <font color="red"></font>
                </div>

                <div>
                    <label for="phone">用户电话：</label>
                    <input type="text" id="phone" v-model="user.phone">
                    <font color="red"></font>
                </div>
                <div>
                    <label for="address">用户地址：</label>
                    <input type="text" v-model="user.address" id="address">
                </div>
                <div>
                    <label>用户角色：</label>
                    <!-- 列出所有的角色分类 -->
                    <select id="userRole" v-model="user.userRole">
                        <option v-for="r in roles" :value="r.id">{{r.roleName}}</option>
                    </select>
                    <font color="red"></font>
                </div>
                <div class="providerAddBtn">
                    <input type="button" value="保存" @click="updateUser"/>
                    <input type="button" value="返回" @click="backUser"/>
                </div>
            </div>
        </div>
    </section>


    <footer class="footer">
        版权归关老师
    </footer>
</div>
<script type="text/javascript" src="js/time.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="calendar/WdatePicker.js"></script>
</body>
</html>

<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        data() {
            return {
                user: {},
                roles: [],
                errorName: '',
                flagName: false,
                beforeUserName: ''
            }
        },
        methods: {
            loadRoleData() {
                axios.get('role_find')
                    .then(response => {
                        this.roles = response.data
                    })
            },
            backUser() {
                location.href = 'user.html'
            },
            checkUnique() {
                if (this.user.userName === this.beforeUserName) {
                    this.flagName = true
                    this.errorName = ''
                    return;
                }
                axios.get('user_check_exist', {
                    params: {
                        field: 'userName',
                        value: this.user.userName
                    }
                }).then(response => {
                    if (response.data === true) {
                        this.flagName = true
                        this.errorName = ''
                    } else {
                        this.flagName = false
                        this.errorName = '姓名已被占用'
                    }
                })
            },
            updateUser() {
                if (this.flagName === false) {
                    this.$message({
                        message: '姓名已被占用',
                        type: 'error'
                    });
                    return;
                }
                axios({
                    method: 'put',
                    url: 'user_update',
                    params: {
                        userName: this.user.userName,
                        gender: this.user.gender,
                        birthday: this.user.birthday,
                        phone: this.user.phone,
                        address: this.user.address,
                        userRole: this.user.userRole,
                        id: this.user.id
                    }
                }).then(response => {
                    if (response.status === 200) {
                        location.href = 'user.html'
                    }
                })
            }
        },
        created() {
            let e = sessionStorage.getItem('USER_UPDATE')
            this.user = JSON.parse(e)
            this.beforeUserName = this.user.userName
            this.loadRoleData()
        }
    }).$mount('#app')
</script>